<template>
  <div class="contractInfo box">
    <el-card
      shadow="never"
      :header="titleMap[mode]"
      class="item-background"
      style="width: 100%"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="addForm"
        label-width="auto"
        label-position="right"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input
            v-model="form.name"
            clearable
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库单位" prop="productUnitId">
          <el-select
            v-model="form.productUnitId"
            :filterable="true"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in unitList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="分类" prop="categoryId">
          <el-cascader
            v-model="form.categoryId"
            :options="categoryList"
            :props="categoryListProps"
            :show-all-levels="false"
            clearable
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="form.price" clearable placeholder="请输入商品名称"
            ><template v-slot:append>元</template></el-input
          >
        </el-form-item>
        <el-form-item label="规格型号" style="width: 100%">
          <div class="input">
            <el-input
              v-model="form.spuSpecification"
              type="textarea"
              rows="3"
              clearable
              placeholder="请输入规格型号"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="备注" style="width: 100%">
          <el-input
            type="textarea"
            v-model="form.info"
            rows="3"
            clearable
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="2"
            inline-prompt
            active-text="上架"
            inactive-text="下架"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button type="primary" @click="save" :loading="isSaveing"
          >保 存</el-button
        >
        <el-button @click="cencel">取 消</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'addGoods',
  data () {
    return {
      mode: this.$route.query.mode,
      titleMap: {
        add: '添加',
        edit: '编辑',
      },
      isSaveing: false,
      attrObj: null,
      attrValue: '',
      valueList: [],
      selectedValue: [],//被选中的value
      categoryList: [],//分类列表
      categoryListProps: {
        value: "id",
        label: 'name',
        emitPath: false,
        checkStrictly: true
      },
      form: {
        name: '',
        categoryId: '',//类别id
        productUnitId: '',//仓库单位
        price: '',
        spuSpecification: '',//SPU规格
        info: '',//备注
        status: 1,//状态1上架2下架
      },
      goodsList: [],
      tableColumn: [],
      attrList: [],
      unitList: [],//计量单位
      rules: {
        name: [
          { required: true, message: '请输入商品名称' }
        ],
        attrValue: [
          { required: true, message: '请添加自定义属性' }
        ],
        productUnitId: [
          { required: true, message: '请选择基本仓库单位', trigger: 'change' }
        ],
        financeUnitId: [
          { required: true, message: '请选择财务计量单位', trigger: 'change' }
        ],
        categoryId: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
    if (this.$route.query.mode == 'edit') {
      this.getDetail()
    }
    this.getCategoryList()
    this.getUnitList()

  },
  methods: {
    async getDetail () {
      let { data } = await this.$API.goods.getGoodsDetailById.post({ id: this.$route.query.id })
      this.form = data
    },

    //获取分类列表
    async getCategoryList () {
      var { data } = await this.$API.goods.getCategoryList.get()
      this.categoryList = data
    },

    // 获取计量单位列表
    async getUnitList () {
      let param = {
        limit: 1000,
        page: 1
      }
      let { data } = await this.$API.goods.getUnitList.get(param)
      this.unitList = data
    },

    // 添加商品
    save () {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          let res = null
          let mode = this.$route.query.mode
          if (mode == 'add') {
            res = await this.$API.goods.addGoods.post(this.form)
          } else if (mode == 'edit') {
            res = await this.$API.goods.updateGoods.post(this.form)
          }
          this.isSaveing = false
          if (res.code == 200) {
            this.closeSelectedTag(this.$route)
            this.$router.push({
              path: '/goods/goodsManagerment'
            })
            this.$message.success("操作成功")
          }
        }
      })
    },

    cencel () {
      this.closeSelectedTag(this.$route)
      this.$router.push({
        path: '/goods/goodsManagerment'
      })
    },

    //关闭tag
    closeSelectedTag (tag) {
      this.$store.commit("removeViewTags", tag)
      this.$store.commit("removeIframeList", tag)
      this.$store.commit("removeKeepLive", tag.name)
    },
  }
}
</script>
<style lang="scss" scoped>
.box {
  margin: 10px;
}
.el-form {
  // width: 100%;
  padding: 30px;
  background: #fff;
  :deep(.el-form-item__content) {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  :deep(.el-input) {
    width: 100%;
    margin-right: 20px;
  }
  .input {
    width: 100%;
    display: flex;
  }
}

.attrList {
  width: 100%;
  min-height: 100px;
  margin-top: 15px;
  padding: 15px;
  border: 1px #eee solid;
  .item {
    margin-bottom: 20px;

    .label {
      min-width: 40px;
      display: inline;
      padding: 5px 10px;
      border: 1px #eee solid;
      background: #eee;
    }
    .valueList {
      margin-top: 10px;
      // .valueItem {
      //   display: inline;
      //   padding: 5px 10px;
      //   border: 1px #eee solid;
      //   background: #409eff;
      //   color: #fff;
      // }
    }

    .addBox {
      display: flex;
      margin-top: 10px;
    }
  }

  :deep(.is-checked) {
    .el-checkbox__label {
      color: #606266;
    }
  }
}

.button {
  margin-top: 50px;
}
</style>